<template>
	<view class="i-whole-goods" :style="[viewStyle]">
		<layout-goods-list :requestAllGoods="option.goodsType === 1" :hasReachBottom="hasReachBottom&&option.reachBottom" :storeId="storeId" :option="_option" requestGoods></layout-goods-list>

	</view>

</template>

<script lang="ts" setup>
	import {computed} from 'vue'
	import layoutGoodsList from './child/goods-list.vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'

	const props = withDefaults(defineProps<{
		storeId ?: string
		hasReachBottom:boolean,
		option : {
			//商品列表类型 1手动添加的商品 2分类商品，应通过接口请求对应分类下的商品列表 3 分区商品，应通过接口请求对应分区下的商品列表
			goodsType : 1 | 2 | 3
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor : string
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius : number
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor : string
			//图标颜色 仅buttonType为2生效
			addIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//图标颜色 仅buttonType为4生效
			circularCarIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor : string
			//样式风格
			styleType : 0 | 1 | 2
			//底色背景
			backgroundColor : string
			//商品背景
			goodsBackgroundColor : string
			//jump跳转商品详情 add加入购物车
			buttonEvent : 'jump' | 'add'
			// 商品边距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 商品圆角
			goodsRadiusTop : number
			goodsRadiusBottom : number
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0|1|2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0|1|2
			//自定义活动角标图片地址
			signIconUrl : string
			// 商品分类
			goodsCategory ?: {
				name : string
				id : string
			},
			// 商品分组
			subarea ?: {
				name : string
				id : string
			},
			// 是否触底加载
			reachBottom : boolean
			// 是否显示店铺
			storeShow: boolean

		}
	}>(), {
		option: () => ({
			goodsType: 1,
			layoutType: 1,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonRadius: 4,
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonEvent: 'jump',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
			goodsCategory: {
				name: '',
				id: '',
			},
			subarea: {
				name: '',
				id: '',
			},
			reachBottom: false,
			storeShow: false

		})
	})

	const ctx = useCurrentInstance()
	const { viewStyle } = useLayoutCompoments(ctx, props.option)
	
	const _option = computed(() => {
		return {
			...props.option,
			categoryGoodsNumber:20
		}
	})
	
</script>

<style scoped lang="scss">
	@import '@/components/list/css/layoutGoods.scss';
	@import '@/components/list/css/layoutCommon.scss';
</style>